<!DOCTYPE html>
<html>
<head>
    <title>Automatic Pjax</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="/icons/pjax.ico">
    <link rel="stylesheet" type="text/css" href="assets/pjax.css" data-pjax-resource="true">
    <script src="assets/pjax.js" data-pjax-resource="true"></script>
    <script data-pjax-resource="true">
    Pjax.start();

    Pjax.on('initiate', function (url, config) {
        console.info('Pjax.on(initiate)', { url: url, config: config });
    });
    Pjax.on('done', function (url, status) {
        console.info('Pjax.on(done)', { url: url, status: status });
    });
    Pjax.on('fail', function (url, status, error) {
        console.error('Pjax.on(fail)', { url: url, status: status, error: error });
    });
    Pjax.on('then', function (url) {
        console.info('Pjax.on(then)', url);
    });
    Pjax.on('history', function (url, data) {
        console.info('Pjax.on(history)', { url: url, data: data });
    });
    </script>
    <style type="text/css">
    #notice {
        background-color: #188abd;
        color: #fff;
        padding: 5px 15px;
    }
    </style>
</head>
<body>
    <script>
    if (!Pjax.supported) {
        document.write('<div id="notice">');
        document.write('<p>Your browser don\'t support Pjax, using normal navigation</p>');
        document.write('</div>');
    }
    </script>

    <ul>
        <li><a href="./"><strong>Home</strong></a></li>
        <li><a target="_blank" href="./">Home (target="_blank")</a></li>
        <li><a href="example-1.html"><strong>Example 1</strong> xyz</a></li>
        <li><a href="example-2.html">Example 2</a></li>
        <li>
            <a href="example-3.html" data-pjax-done="console.info('done', this);">
                Example 3 (set event with <code>data-pjax-done</code> attribute)
            </a>
        </li>
        <li>
            <a href="example-3.1.html" data-pjax-fail="console.error('fail', this);">
                Not Found (set event with <code>data-pjax-fail</code> attribute)
            </a>
        </li>
        <li><a href="example-3.html" target="foobar">Example 3 (target="foobar")</a></li>
        <li><a href="example-4.html" target="foobar">Example 4 (target="foobar")</a></li>
        <li><a href="example-5.html" target="foobar">Example 5 (target="foobar")</a></li>
        <li><a href="https://github.com/brcontainer/pjax.js/">External (without target)</a></li>
        <li><a target="_blank" href="https://github.com/brcontainer/pjax.js/issues">External (target="_blank")</a></li>
        <li><a href="example-5.html" data-pjax-ignore="true">data-pjax-ignore attribute</a></li>
        <li><a href="empty.html">empty page</a></li>
        <li><a href="redirect.html">Redirect only front-page</a></li>
        <li><a href="javascript:void(console.log('Pjax', new Date))">href="javascript:"</a></li>
    </ul>
    <div id="pjax-container">
        <h1>Home page</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum nibh sed laoreet faucibus. Praesent hendrerit ornare pulvinar. Nam volutpat, enim sit amet rhoncus convallis, nisl ligula sagittis justo, nec sodales mauris quam ac arcu. Praesent at dui nec tortor efficitur imperdiet. In in ex sed tortor tempus ultrices. Nulla eget dui eget massa luctus accumsan eget quis purus. Proin ultrices porttitor quam, ut fermentum lectus mollis vel. Nulla tempor bibendum mauris sit amet hendrerit. Aenean consequat libero sit amet aliquet egestas. Phasellus a finibus justo. Nulla non augue a purus egestas luctus eu eget tellus. Proin viverra pulvinar hendrerit. Integer maximus mauris at magna rhoncus, aliquam venenatis neque aliquam. Proin tincidunt pharetra dui sit amet efficitur. Pellentesque imperdiet augue vel quam posuere, eu lacinia orci vestibulum.</p>

        <hr>

        <form action="example-4.html" method="POST">
            <p>
                <input type="text" name="text" placeholder="Field text" value="t">
                <input type="password" name="pass" placeholder="Password text">
            </p>
            <p>
                <input type="checkbox" name="check[]" value="1"> Option 1,
                <input type="checkbox" name="check[]" value="2" checked> Option 2,
                <input type="checkbox" name="check[]" value="3" checked> Option 3,
                <input type="checkbox" name="check[]" value="4"> Option 4
            </p>
            <p>
                <input type="radio" name="radio" value="1"> Option 1,
                <input type="radio" name="radio" value="2" checked> Option 2
            </p>
            <p>
                <select name="combo">
                    <option value="a" selected>a</option>
                </select>
                <select name="multiple" multiple>
                    <option value="1">1</option>
                    <option value="2" selected>2</option>
                    <option value="3">3</option>
                    <option value="4" selected>4</option>
                </select>
                <output name="out">50</output>
            </p>
            <p>
                <button type="submit">Send</button>
            </p>
        </form>

        <hr>

        <form action="example-4.html" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="hidden1" value="foobar">
            <input type="hidden" name="hidden2[]" value="foo">
            <input type="hidden" name="hidden2[]" value="bar">
            <input type="hidden" name="hidden2[]" value="baz">
            <p><input type="file" name="field-file"></p>
            <p>
                <button type="submit">Send</button>
            </p>
        </form>
    </div>
</body>
</html>
